import { Input } from "antd";
import { FormulaEditorModal } from "./FormulaEditorModal";
import { useEffect, useState } from "react";
import { InfoCircleOutlined } from "@ant-design/icons";

interface FormulaEditorProps{
  id?: string,
  selectorType?: "input"|"textarea",
  value?: string,
  onChange?: (val: string)=>void
}
export function FormulaEditor(props:FormulaEditorProps){
  const {id,onChange,value} = props;
  const [visible, setVisible] = useState(false);
  const [inputValue, setInputValue] = useState(value)
  const Suffix = ()=>(<InfoCircleOutlined style={{ color: "rgba(0,0,0,.45)" }} onClick={()=>setVisible(true)}/>)
  function handleChange(e: React.ChangeEvent<HTMLInputElement>){
    const val = e.target.value
    setInputValue(val)
    onChange?.(val)
  }
  function doOk(val: string){
    setInputValue(val)
    onChange?.(val)
  }
  return (
    <>
      <Input placeholder="参数值" id={id} value={inputValue} title={inputValue} suffix={<Suffix/>} onChange={handleChange}/>
      <FormulaEditorModal value={inputValue} visible={visible} handleCancel={() => setVisible(false)} handleOk={doOk} />
    </>
  )
}